<template>
  <div>
    <div class="left">
      <div class="dayItem">
        <div class="title">人员民族分布TOP5</div>
        <div class="echarts">
          <echart :options="option1" />
        </div>
      </div>
      <div class="dayItem">
        <div class="title">房屋类型分布TOP5</div>
        <div class="echarts">
          <echart :options="option2" />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="dayItem">
        <div class="title">车辆归属地TOP5</div>
        <div class="echarts">
          <echart :options="option3" />
        </div>
      </div>
      <div class="dayItem">
        <div class="title">企业行业类别TOP5</div>
        <div class="qian_five">
          <div class="ranking" v-for="(item, index) in ranking">
            <div class="nobg">NO.{{ index + 1 }}</div>
            <div>{{ item.name }}</div>
            <div>{{ item.value }}家</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Echart from "components/common/echart/Echart.vue";

import { echart1, echart2, echart3 } from "./echarts";

export default {
  components: { Echart },
  data() {
    return {
      ranking: [
        {
          name: "制造业",
          value: 33,
        },
        {
          name: "房地产业",
          value: 22,
        },
        {
          name: "软件开发",
          value: 11,
        },
        {
          name: "超市",
          value: 10,
        },
        {
          name: "煤矿业",
          value: 3,
        },
      ],
      option1: null,
      option2: null,
      option3: null,
    };
  },

  created() {
    this.option1 = echart1();
    this.option2 = echart2();
    this.option3 = echart3();
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.left {
  position: absolute;
  left: 28px;
  top: 276px;
  width: 610px;
  height: 625px;
  background-image: url(~assets/img/day/04-6.png);
  background-size: 100% 100%;
}
.right {
  position: absolute;
  right: 28px;
  top: 276px;
  width: 610px;
  height: 625px;
  background-image: url(~assets/img/day/04-8.png);
  background-size: 100% 100%;
}

.dayItem {
  height: 50%;
  width: 100%;
  text-align: center;
  .title {
    font-size: 16px;
    font-family: "Adobe Heiti Std";
    color: rgb(255, 255, 255);
    letter-spacing: 2px;
    background-image: -moz-linear-gradient(
      0deg,
      rgba(0, 88, 179, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgb(0, 88, 179) 51%,
      rgba(0, 88, 179, 0) 100%
    );
    background-image: -webkit-linear-gradient(
      0deg,
      rgba(0, 88, 179, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgb(0, 88, 179) 51%,
      rgba(0, 88, 179, 0) 100%
    );
    background-image: -ms-linear-gradient(
      0deg,
      rgba(0, 88, 179, 0) 0%,
      rgba(0, 88, 179, 0.99) 51%,
      rgb(0, 88, 179) 51%,
      rgba(0, 88, 179, 0) 100%
    );
    line-height: 40px;
    text-align: center;
    width: 100%;
  }
  .echarts {
    height: calc(100% - 40px);
    width: 437px;
    margin: 0 auto;
  }
}

.qian_five {
  width: 437px;
  height: calc(100% - 40px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 17.47px;
  font-family: "Adobe Heiti Std";
  color: rgb(255, 255, 255);
  .ranking {
    width: 434px;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url(~assets/img/day/04-10.png) no-repeat center center;
    background-size: 100% 100%;
    font-size: 18px;
    font-family: "Adobe Heiti Std";
    color: rgb(255, 255, 255);
    padding: 0 10px;
    .nobg {
      width: 74px;
      font-size: 20px;
      font-family: "BebasNeueCyrillic";
      color: #fff;
      text-align: center;
    }
  }
  .ranking:nth-child(1) .nobg {
    background: url(~assets/img/day/04-1-1.png) no-repeat;
    background-size: 100% 100%;
  }
  .ranking:nth-child(2) .nobg {
    background: url(~assets/img/day/04-2-2.png) no-repeat;
    background-size: 100% 100%;
  }
  .ranking:nth-child(3) .nobg {
    background: url(~assets/img/day/04-3-3.png) no-repeat;
    background-size: 100% 100%;
  }
  .ranking:nth-child(4) .nobg {
    background: url(~assets/img/day/04-4-4.png) no-repeat;
    background-size: 100% 100%;
  }
  .ranking:nth-child(5) .nobg {
    background: url(~assets/img/day/04-5-5.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>